const oApp = document.getElementById('app')

function handleRouter() {
  const { state } = window.history
  console.log(window.history)
  switch(state) {
    case '':
    case '/':
    case null:
    case 'home': 
      oApp.innerHTML = `
        <h1>home</h1>
        <button id="toListBtn">to list</button>
      `;
      bindEvent()
      break;
    case 'list':
      oApp.innerHTML = `
        <h1>list</h1>
        <button id="toHomeBtn">to home</button>
      `;
      bindEvent()
      break;
    default: 
      oApp.innerHTML = `
        <h1>404 not found</h1>
      `;
  }
}

function handleToListBtnClick() {
  window.history.pushState('list', '', '/list')
  handleRouter()
}

function handleToHomeBtnClick() {
  window.history.pushState('', '', '/')
  handleRouter()
}

function bindEvent() {
  const oToListBtn = document.getElementById('toListBtn')
  const oToHomeBtn = document.getElementById('toHomeBtn')
  oToListBtn && oToListBtn.addEventListener('click', handleToListBtnClick, false)
  oToHomeBtn && oToHomeBtn.addEventListener('click', handleToHomeBtnClick, false)
}

handleRouter()
bindEvent()


